<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>充值奖金详情</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="/Public/amazeui/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/Public/mescroll/css/mescroll.min.css"/>
    <style>
        .mescroll {
            font-size: 1.4rem;
        }
        .my-goods-img {
            width: 70px;
            height: 70px;
            padding: 5px;
            margin-right: 5px;
        }
        .my-goods-img img{
            width: 60px;
            height: 60px;
        }
        .my-good-des {
            line-height: 22px;
        }
        .my-good-right {
            line-height: 35px;
            margin-right: 10px;
        }
        .am-text-truncate{
            max-width: 100px;
        }
        .am-header-title,.am-header-icon{
            font-size: 1.6rem !important;
        }
        [v-cloak] {
            display: none
        }
        #dataList {
            margin-top: 5px;
        }
        .mescroll{
            position: fixed;
            top: 104px;
            bottom: 0;
            height: auto;
        }
        .tab{display: flex;line-height: 40px;position: fixed;top: 100px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
        .tab a{width: 33.333333%;background: #fff;text-align: center;}

    </style>
</head>

<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-header-default am-header-fixed" style="height: 44px;line-height: 44px;background-color: #36373C;color: #333">
        <h1 class="am-header-title" id="title">充值奖金明细</h1>
        <div class="am-header-left am-header-nav">
            <a onclick="history.go(-1)"><i class="am-header-icon am-icon-chevron-left am-icon-fw"></i></a>
        </div>
    </header>
    <div style="height: 50px;width: 100%;background: #beebff;line-height: 50px;">
        <span style="margin-left: 10%;">奖金总数：{$commissions}</span><span style="margin-left: 10%;">充值奖金总数：{$pcommission}</span>
    </div>
    <div class="tab">
        <a href="javascript:;">客户电话</a>
        <a href="javascript:;">充值金额</a>
        <a href="javascript:;">所得奖金</a>
        <a href="javascript:;">充值时间</a>
    </div>
    <div class="mescroll" id="mescroll" style="margin-top: 2.5rem;">
        <ul class="am-list" id="dataList" v-cloak>
            <li class="am-cf"  v-for = "item in list">
                <div class="am-fl my-good-des" style="width: 100%;height: 4rem;line-height: 4rem;">
                    <span class="am-block" style="display: block;float: left;width: 25%;text-align: center;">{{item.tel}}</span>
                    <span class="am-block" style="display: block;float: left;width: 25%;text-align: center;">{{item.recharge}}</span>
                    <span class="am-block" style="display: block;float: left;width: 25%;text-align: center;">{{item.moneys}}</span>
                    <span class="am-block" style="display: block;float: left;width: 25%;text-align: center;">{{item.ctime|time}}</span>
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="/Public/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/Public/vue/vue.js"></script>
<script src="/Public/amazeui/assets/js/amazeui.min.js"></script>
<script type="text/javascript" src="/Public/mescroll/js/mescroll.min.js"></script>
<script>





    var vm = new Vue({
        el: "#dataList",
        data: {
            list: []
        },
        mounted: function () {
            var self = this;
            self.mescroll = new MeScroll("mescroll", {
                up: {
                    auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    callback: self.upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                    empty:{ //配置列表无任何数据的提示
                        warpId:"dataList",
                        tip : "亲,暂无相关数据哦~" ,
                    },
                }
            });
        },
        methods: {
            upCallback: function (page) {
                var page = page;
                var self = this;
                $.ajax({
                    url: '/index.php/Home/Recharge/commission',
                    type: "post",
                    dataType: "json",
                    data: {
                        p: page.num
                    },
                    success: function (res) {
                        console.log(res);
                        if (page.num == 1) {
                            self.list = res.data;
                        } else {
                            self.list = self.list.concat(res.data);
                        }

                        if (res.data.length < 10) {
                            self.mescroll.endBySize(res.data.length, true);
                        } else {
                            self.mescroll.endBySize(res.data.length);
                        }
                    }
                });
            }
        },

        filters: {
            time: function (value) {

                let d = new Date(parseInt(value) * 1000)

                return (d.getFullYear()) + '-' + (d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) + '-' + (d.getDate() > 9 ? d.getDate() : '0' + d.getDate())

            }
        }
    })

</script>
</body>